import QtQuick 2.15
import QtQuick.Window 2.15
Window {
    visible: true
    width: 500
    height: 400
    title: "基础可视元素示例"
    // Item：逻辑容器，不直接渲染
    Item {
        id: container
        width: parent.width
        height: parent.height
        // Rectangle：矩形区域
        Rectangle {
            id: rect
            x: 30
            y: 30
            width: 150
            height: 100
            color: "lightblue"
            border.color: "blue"
            border.width: 2
            radius: 10
            Text {
                text: "Rectangle\n(可见矩形)"
                anchors.centerIn: parent
                horizontalAlignment: Text.AlignHCenter
            }
        }
        // Image：加载网络或本地图片（这里用一个简单的灰色方块代替）
        Rectangle {
            id: imagePlaceholder
            x: 250
            y: 30
            width: 150
            height: 100
            color: "#ddd"
            border.color: "black"
            Text {
                text: "Image\n(这里本可显示图片)"
                anchors.centerIn: parent
                horizontalAlignment: Text.AlignHCenter
            }
        }
        // Text：显示文字
        Text {
            x: 30
            y: 180
            text: "Text 元素：可以显示文字，支持字体样式"
            font.pixelSize: 16
            color: "darkgreen"
        }
        // Item：作为容器包裹一组元素（逻辑分组）
        Item {
            id: groupedItem
            x: 30
            y: 240
            width: 200
            height: 100
            Rectangle {
                anchors.fill: parent
                color: "lightyellow"
                border.color: "orange"
            }
            Text {
                anchors.centerIn: parent
                text: "Item 容器：可放多控件\n自己不渲染"
                horizontalAlignment: Text.AlignHCenter
            }
        }
    }
}
